<template>
  <div class="app-container">
    <el-form ref="form" :rules="rules" :model="form">
      <el-divider content-position="left"><h3>基础信息</h3></el-divider>
      <el-form-item label="商户名" :label-width="width" style="width: 600px" prop="username">
        <el-input v-model="form.username" :disabled="true" />
        <!--        <el-input v-model="form.site.name" placeholder="请输入站点名称" autocomplete="off" clearable />-->
      </el-form-item>
      <el-form-item label="登录密码" :label-width="width" prop="password">
        <el-input v-model="form.password" type="password" auto-complete="new-password" clearable />
      </el-form-item>
      <el-form-item label="确认密码" :label-width="width" prop="checkPass">
        <el-input v-model="form.checkPass" type="password" auto-complete="new-password" clearable />
      </el-form-item>

      <el-form-item style="margin: auto">
        <el-button v-action="'tenant@update'" type="primary" @click="submit">编 辑</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { tenantInfo, tenantUpdate } from '@/api/tenant'
export default {
  name: 'Basic',
  data() {
    var checkPass2 = (rule, value, callback) => {
      if (this.form.password && this.form.password !== '') {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'))
        }
      }
      callback()
    }
    return {
      width: '180px',
      // 站点信息
      form: {},
      // 规则
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        checkPass: [
          { required: true, validator: checkPass2, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      tenantInfo({}).then(response => {
        this.form = response.data
      })
    },
    submit() {
      const that = this

      this.$refs['form'].validate((valid) => {
        if (valid) {
          that.$confirm('是否提交本次编辑信息', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function() {
            tenantUpdate(that.form).then(response => {
              // console.log(response)
              that.$message.success(response.message)
              that.open = false
              that.getInfo()
            })
          }).catch(() => {
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.el-form .el-form-item {
  width: 600px;
}
</style>
